<template>
  <div class="component_box">
    <component :is="isComponent"></component>
    <div class="btnbox" v-if="show" @click="cutPage">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      NEXT
    </div>
    <div class="btnbox" v-if="!show" @click="cutHome">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      TOP
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref, onBeforeUnmount } from "vue";
import Home from "./home.vue";
import Info from "./info.vue";
import photoAlbum from "./photoAlbum.vue";
import echartsGL from "./echartsGL.vue";
import finishPage from "./finishPage.vue";
export default defineComponent({
  setup() {
    let isComponent = ref("Home");
    let page = 0;
    let show = ref(true);
    let componentFlag = false;
    let componentList = [
        "Home",
        "Info",
        "photoAlbum",
        "echartsGL",
        "finishPage",
      ],
      flag = true,
      index = 0,
      componentName = "";
    const cutPage = () => {
      page++;
      console.log(page,componentList.length-1)
      if (page >= componentList.length-1) {
        isComponent.value = componentList[page];
        show.value = false;
      } else {
        isComponent.value = componentList[page];
      }
    };
    const cutHome = () => {
      isComponent.value = "Home";
      page = 0;
      show.value = true;
    };
    const scrollFun = () => {
      //   window.addEventListener("mousewheel", (event) => {
      //     debounce(event);
      //   });
    };
    const debounce = (event) => {
      let delta = event.detail || -event.wheelDelta;
      let t = null;
      if (t) {
        clearTimeout(t);
      }

      //等待1秒后将 t 置为 null，在这1秒内如果再点击事件就会去到if(t)的执行
      if (flag) {
        flag = false;
        t = setTimeout(() => {
          if (delta > 0) {
            index += 1;
            if (index >= componentList.length) {
              index = componentList.length;
              componentName = componentList[componentList.length - 1];
            } else {
              componentName = componentList[index];
            }
          } else if (delta < 0) {
            index -= 1;
            if (index > 0) {
              componentName = componentList[index];
            } else {
              componentName = componentList[0];
            }
          }
          if (componentName == "photoAlbum") {
            componentFlag = true;
          } else {
            isComponent.value = componentName;
          }
          t = null;
          flag = true;
        }, 1500);
      }
    };
    onMounted(() => {
      // 浏览器兼容
      if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
        document.addEventListener("DOMMouseScroll", scrollFun(), false);
      } else if (document.addEventListener) {
        document.addEventListener("mousewheel", scrollFun(), false);
      } else if (document.attachEvent) {
        document.attachEvent("onmousewheel", scrollFun());
      } else {
        document.onmousewheel = scrollFun();
      }
    });
    onBeforeUnmount(() => {
      // 移除事件监听
      //   window.removeEventListener("scroll", () => {});
    });

    return {
      isComponent,
      show,
      cutPage,
      cutHome,
    };
  },
  components: { Home, Info, photoAlbum, echartsGL, finishPage },
});
</script>

<style lang="scss" scoped>
.component_box {
  width: 100%;
  height: 100%;
  position: relative;
  .btnbox {
    position: absolute;
    bottom: 0;
    right: 3%;
    cursor: pointer;
  }
}

.btnbox {
  position: relative;
  display: inline-block;
  padding: 25px 30px;
  margin: 40px 0;
  color: #03e9f4;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  overflow: hidden;
  margin-right: 50px;
}
.btnbox:hover {
  background: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
    0 0 200px #03e9f4;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
.btnbox:nth-child(1) {
  filter: hue-rotate(270deg);
}
.btnbox:nth-child(2) {
  filter: hue-rotate(110deg);
}
.btnbox span {
  position: absolute;
  display: block;
}
.btnbox span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: animate1 1s linear infinite;
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}
.btnbox span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}
.btnbox span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

.btnbox span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
</style>
